<template>
    <transition name="popup" appear>
        <div class="ui-popup" :class="{'popup-in':status}" v-show="status" @touchmove.stop.prevent>
            <div class="ui-popup-wrap" v-if="modal" @click="close"></div>
            <slot></slot>
        </div>
    </transition>
</template>
<script>
export default {
    name:'ui-popup',
    props:{
        modal:{
            type:Boolean,
            default:true
        },
        status:{
            type:Boolean,
            default:false,
        }
    },
    watch:{
        status(nv,ov){
            if(nv){
                document.body.classList.add('lock');
            }else{
                document.body.classList.remove('lock');
            }
        }
    },
    methods:{
        close(){
            this.$emit('close');
        }
    }
}
</script>
<style lang="less">
.ui-popup {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99999;

    .ui-popup-wrap {
        position:absolute;
        top:0;
        right:0;
        left:0;
        bottom:0;
        z-index: 1;
        background-color:rgba(0,0,0,.3);
    }
}
</style>

